<!-- 随机文章列表 -->
<template>
  <!-- 只有在 rankingItems 不为空时才显示 -->
  <div class="ranking-list" v-if="rankingItems.length>0">
    <h4><i class="fa fa-random"></i> 随机文章</h4>
    <div class="underline"></div>
    <div class="ranking-image">
      <img alt="Ranking" src="../../../assets/images/ranking.jpg"/>
      <div class="overlay-text">
        当你无法再拥有时，<br>你唯一能做的就是不要再忘记。
      </div>
    </div>
    <ul>
      <li :key="item.id" v-for="(item, index) in rankingItems" class="recommend-item">
        <span class="badge">{{ index + 1 }}</span>
        <router-link :to="{ name: 'article-detail', params: { id: item.id } }" class="recommend-title">{{
            item.title
          }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>

const rankingItems = ref([]);

async function fetchRankingItems() {
  try {
    const response = await axios.get('/api/cms/articles/get_random/'); // 根据实际 API 路径替换
    if (response.data && Array.isArray(response.data)) { // 确保数据格式正确
      rankingItems.value = response.data.map((item) => ({
        id: item.id,
        title: item.title,
        url: item.url ? item.url.replace(/^.*?api\//, '') : '', // 安全调用 replace
      }));
    } else {
      console.error('获取排名数据格式不正确:', response.data.toString());
    }
  } catch (error) {
    console.error('获取排名数据失败:', error);
  }
}

onMounted(() => {
  fetchRankingItems();
});
</script>

<style scoped>
.ranking-list {
  background-color: var(--card-bg-color, #fff);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}

.ranking-image {
  position: relative;
  margin-bottom: 10px;
}

.ranking-image img {
  width: 100%;
  border-radius: 8px;
  max-height: 168px;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.ranking-image:hover img {
  transform: scale(1.02); /* 悬停时放大10% */
}

.overlay-text {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 5px;
}

h4 {
  color: var(--card-title-color, #333);
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 1.2em;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px;
  transition: color 0.2s ease-in-out;
}

li a:hover {
  color: #5fb878;
}

.recommend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 2px dashed #ccc;
  width: 100%;
  padding: 2px;
}

.recommend-title {
  font-size: 14px;
  margin-left: 10px;
  color: var(--card-title-color, #333);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制行数为两行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  background-color: #f44336;
  color: white;
  border-radius: 5px;
  padding: 0 6px;
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 4px;
}
</style>
